<template>
  <div class="pie" id="Line"></div>
</template>

<script>
import * as echarts from 'echarts';
import json from './theme';

export default {
  name: 'Lines',
  props: {
    data: {
      type: Object,
      default: () => {

      }
    }
  },
  watch: {
    data: {
      handler(val) {
        if (Object.values(val).length) {
          this.init();
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    init() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('Line');
        echarts.registerTheme('dark', json);

        const myChart = echarts.init(chartDom, 'dark');

        const key = Object.keys(this.data).filter(e => e != 'month');
        const label = this.data.month;

        console.log(this.data);

        const normalDataRes = {
          name: '日常',
          type: 'line',
          // stack: 'Total',
          data: this.data['日常'].map(e => Number(e.sum))
        };

        const czDataRes = {
          name: '应急',
          type: 'line',
          // stack: 'Total',
          data: this.data['应急'].map(e => Number(e.sum))
        };

        const lookDataRes = {
          name: '观察',
          type: 'line',
          // stack: 'Total',
          data: this.data['观察'].map(e => Number(e.sum))
        };

        const allDataRes = {
          name: '总量',
          type: 'line',
          // stack: 'Total',
          data: this.data['总量'].map(e => Number(e.sum))
        };

        const option = {
          // title: {
          //   text: 'Stacked Line'
          // },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: key,
            x: 'right',
            padding: [20, 20, 0, 0]
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '25%'
            // containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: label
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [
            normalDataRes,
            czDataRes,
            lookDataRes,
            allDataRes
          ]
        };

        option && myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
    margin-top: -20px;
  }
</style>
